<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>商品趋势</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/echarts.js"></script>
	<script src="js/jquery.js"></script>
</head>
<body>
<div class="container-fluid">
	<%@include file="header.jsp"%>

	<br><br>
	<form class="form-horizontal" action="goodInfoList" method="post" enctype="multipart/form-data">
		<input type="hidden" name="id"  value="${good.id}"/>
		<input type="hidden" id="goodName" value="${good.name}"/>
		<input type="hidden" id="goodTrend" value="${goodTrend}"/>
		<div id="main" style="width: 80%;height:500px;"></div>
		<br><br>
		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-10">
				<button type="submit" class="btn btn-success">返回</button>
			</div>
		</div>
	</form>
</div>
</body>
</html>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    //获取前端转过来的Json集合数据组
     var goodName = $("#goodName").val();

    var goodTrend = $("#goodTrend").val();
    var trends=eval(${goodTrend});
   // alert(eval(${goodTrend}))
    var month =[];
    var total=[];
    var maxMonth=trends[trends.length-1].month;
    for (let i = 0; i < trends.length; i++) {
		console.log(trends[i].month)
		 if(i==(trends.length-1)){
             maxMonth=trends[trends.length-1].month

                 month.push('下个月')

		 }else{
             month.push(trends[i].month)
		 }


		//month.push(trends[i].month)
		console.log(maxMonth)


		total.push(trends[i].total)
    }
    // for (let i = 0; i <goodTrend.length ; i++) {
    //    // alert(goodTrend[i])
    //     // alert(goodTrend[i].month)
    //     // month.push(goodTrend[i].month);
    //     // total.push(goodTrend[i].total)
    // }
    // var order_counts = $("#orderCounts").val();
    // var years = $("#years").val();
    // var yearValues = $("#yearValues").val();
    // var quarters = $("#quarters").val();
    // var quarterValues = $("#quarterValues").val();
    // var months = $("#months").val();
    // var monthValues = $("#monthValues").val();
    //
    // var aaa = order_ids.split(",")
    // var bbb = order_counts.split(",")
    // 指定图表的配置项和数据
    // var option = {
    //     title:{
    //         text:goodName,
    //         subtext:'销售趋势图',
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['一月', '二月', '三月', '四月', '五月', '六月']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [920, 801, 964, 1390, 1530, 1620],
    //         type: 'line'
    //     }],
    //     // An highlighted block
    //     tooltip : {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             label: {
    //                 backgroundColor: '#6a7985'
    //             }
    //         }
    //     }
    // };
    var option = {
        // title: {
        //   show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
        //   text: this.title, //主标题文本，'\n'指定换行
        //   x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        //   y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        //   textStyle: {
        //     //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        //     fontSize: 14,
        //     color: "#fff",
        //   },
        // },
            title:{
                text:goodName,
                subtext:'销售趋势图',
            },
        backgroundColor: '#47A3CF',
        grid: {
            left: "5%",
            right: "5%",
            bottom: "10%",
        },
        tooltip: {
            trigger: "axis",
            //   formatter: function (param) {
            //     //   console.log(param)
            //     if(param[0].dataIndex==0){
            //         console.log(1)
            //     }
            //   },
        },
        xAxis: {
            data:month,
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
        },
        visualMap: {
            top: "top",
            left: "center",
            orient: "horizontal",
            textStyle: {
                color: "#fff",
            },
            dimension: 0,
            pieces: [
                {
                    gt: 0,
                    lte: maxMonth-2,
                    color: "cyan",
                    label: "真实值",
                },

                {
                    gt: maxMonth-2,
                    color: "purple",
                    label: "预测值",
                },
            ],
            outOfRange: {
                color: "#000",
            },
        },
        series: {
            name: "lineAQI",
            type: "line",
            data:total,
        },
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;
    // 基于准备好的dom，初始化echarts实例
   // var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    // var option = {
    //     title:{
    //         text:'树懒课堂研发费用折线图',
    //         subtext:'数据纯属虚构',
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['一月', '二月', '三月', '四月', '五月', '六月']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [920, 801, 964, 1390, 1530, 1620],
    //         type: 'line'
    //     }]
    // };
    // 使用刚指定的配置项和数据显示图表。
   // myChart.setOption(option);
</script>